<template>
    <div class="video-container">
      <!-- 视频元素 -->
      <video ref="videoRef" width="600" controls>
        <source src="your-video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
  
      <!-- 进度条 -->
      <div class="progress-bar" @click="onProgressBarClick" ref="progressBar">
        <div class="progress-bar-filled" :style="{ width: `${progress}%` }"></div>
        <div class="progress-thumb" :style="{ left: `${progress}%` }" @mousedown="onThumbMouseDown"></div>
      </div>
      <span>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue';
  
  // 视频的引用
  const videoRef = ref(null);
  // 进度条相关的状态
  const progress = ref(0);
  const currentTime = ref(0);
  const duration = ref(0);
  
  // 进度条拖拽的状态
  const isDragging = ref(false);
  const progressBar = ref(null);
  
  // 组件挂载后初始化视频信息
  onMounted(() => {
    if (videoRef.value) {
      duration.value = videoRef.value.duration;
  
      // 视频播放过程中实时更新进度
      videoRef.value.ontimeupdate = () => {
        currentTime.value = videoRef.value.currentTime;
        progress.value = (currentTime.value / duration.value) * 100;
      };
    }
  });
  
  // 点击进度条时跳转到相应的位置
  const onProgressBarClick = (e) => {
    const barWidth = progressBar.value.offsetWidth;
    const clickPosition = e.offsetX;
    const newProgress = (clickPosition / barWidth) * 100;
    progress.value = newProgress;
    currentTime.value = (newProgress / 100) * duration.value;
    videoRef.value.currentTime = currentTime.value;
  };
  
  // 按住拖动滑块时更新进度
  const onThumbMouseDown = (e) => {
    isDragging.value = true;
    const barWidth = progressBar.value.offsetWidth;
  
    // 持续监听鼠标移动事件来更新进度
    const onMouseMove = (moveEvent) => {
      const moveX = moveEvent.clientX - progressBar.value.getBoundingClientRect().left;
      let newProgress = (moveX / barWidth) * 100;
      newProgress = Math.max(0, Math.min(100, newProgress)); // 限制在 0 到 100 之间
      progress.value = newProgress;
      currentTime.value = (newProgress / 100) * duration.value;
    };
  
    // 监听鼠标抬起事件，结束拖拽
    const onMouseUp = () => {
      isDragging.value = false;
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
    };
  
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  };
  
  // 时间格式化：秒转化为 "分钟:秒" 格式
  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  };
  </script>
  
  <style scoped>
  .video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
  
  .progress-bar {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 8px;
    background-color: #ddd;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .progress-bar-filled {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #4caf50;
    border-radius: 5px;
  }
  
  .progress-thumb {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    background-color: #2196f3;
    border-radius: 50%;
    cursor: pointer;
  }
  
  span {
    margin-top: 10px;
  }
  </style>
  